<template>
  <scroll ref="scroll"
          :data="items"
          :scrollbar="scrollbarObj"
          :pullDownRefresh="pullDownRefreshObj"
          :pullUpLoad="pullUpLoadObj"
          :startY="parseInt(startY)"
          @pullingDown="onPullingDown"
          @pullingUp="onPullingUp">
  </scroll>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import Scroll from '@/components/scroll/scroll.vue'
  const _data = [
    '我是第 1 行',
    '我是第 2 行',
    '我是第 3 行',
    '我是第 4 行',
    '我是第 5 行',
    '我是第 6 行',
    '我是第 7 行',
    '我是第 8 行',
    '我是第 9 行',
    '我是第 10 行',
    '我是第 11 行',
    '我是第 12 行',
    '我是第 13 行',
    '我是第 14 行',
    '我是第 15 行',
    '我是第 16 行',
    '我是第 17 行',
    '我是第 18 行',
    '我是第 19 行',
    '我是第 20 行'
  ]

  export default {
    data () {
      return {
        scrollbar: false,
        scrollbarFade: true,
        pullDownRefresh: true,
        pullDownRefreshThreshold: 90,
        pullDownRefreshStop: 40,
        pullUpLoad: true,
        pullUpLoadThreshold: 500,
        pullUpLoadMoreTxt: '加载更多',
        pullUpLoadNoMoreTxt: '没有更多数据了',
        startY: 0,
        scrollToX: 0,
        scrollToY: -200,
        scrollToTime: 700,
        scrollToEasing: 'bounce',
        scrollToEasingOptions: ['bounce', 'swipe', 'swipeBounce'],
        items: _data,
        itemIndex: _data.length
      }
    },
    components: {
      Scroll
    },
    watch: {
      scrollbarObj () {
        this.rebuildScroll()
      },
      pullDownRefreshObj () {
        this.rebuildScroll()
      },
      pullUpLoadObj () {
        this.rebuildScroll()
      },
      startY () {
        this.rebuildScroll()
      }
    },
    computed: {
      scrollbarObj: function () {
        return this.scrollbar ? {fade: this.scrollbarFade} : false
      },
      pullDownRefreshObj: function () {
        return this.pullDownRefresh ? {
          threshold: parseInt(this.pullDownRefreshThreshold),
          stop: parseInt(this.pullDownRefreshStop)
        } : false
      },
      pullUpLoadObj: function () {
        return this.pullUpLoad ? {threshold: parseInt(this.pullUpLoadThreshold), txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}} : false
      }
    },
    methods: {
//      scrollTo () {
//        this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime, ease[this.scrollToEasing])
//      },
      onPullingDown () {
        this.loading = true
        // 模拟更新数据
        setTimeout(() => {
          this.loading = false
          if (Math.random() > 0.5) {
            // 如果有新数据
            this.items.unshift('我是新数据: ' + +new Date())
          } else {
            // 如果没有新数据
            this.$refs.scroll.forceUpdate()
          }
        }, 1000)
      },
      onPullingUp () {
        // 更新数据
        setTimeout(() => {
          if (this.pullDownRefresh) {
            // 如果有新数据
            let newPage = [
              '我是第 ' + ++this.itemIndex + ' 行',
              '我是第 ' + ++this.itemIndex + ' 行',
              '我是第 ' + ++this.itemIndex + ' 行',
              '我是第 ' + ++this.itemIndex + ' 行',
              '我是第 ' + ++this.itemIndex + ' 行'
            ]

            this.items = this.items.concat(newPage)
          } else {
            // 如果没有新数据
            this.$refs.scroll.forceUpdate()
          }
        }, 30)
      },
      updateScrollbar (val) {
        this.scrollbar = val
      },
      updateScrollbarFade (val) {
        this.scrollbarFade = val
      },
      updatePullDownRefresh (val) {
        this.pullDownRefresh = val
      },
      updatePullDownRefreshThreshold (val) {
        this.pullDownRefreshThreshold = val
      },
      updatePullDownRefreshStop (val) {
        this.pullDownRefreshStop = val
      },
      updatePullUpLoad (val) {
        this.pullUpLoad = val
      },
      updatePullUpLoadThreshold (val) {
        this.pullUpLoadThreshold = val
      },
      updatePullUpLoadMoreTxt (val) {
        this.pullUpLoadMoreTxt = val
      },
      updatePullUpLoadNoMoreTxt (val) {
        this.pullUpLoadNoMoreTxt = val
      },
      updateStartY (val) {
        this.startY = val
      },
      updateScrollToX (val) {
        this.scrollToX = val
      },
      updateScrollToY (val) {
        this.scrollToY = val
      },
      updateScrollToTime (val) {
        this.scrollToTime = val
      },
      updateScrollToEasing (val) {
        this.scrollToEasing = val
      },
      rebuildScroll () {
        Vue.nextTick(() => {
          this.$refs.scroll.destroy()
          this.$refs.scroll.initScroll()
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
